<%@ page language="java" contentType="text/html; charset=UTF-8"
    pageEncoding="UTF-8"%>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>Insert title here</title>
<link rel="stylesheet" href="resources/css/jquery-ui-1.8.21.custom.css">
<style type="text/css">
	#drag{
		width: 80px;
		height: 80px;
		cursor: move;
		background: #6699cc;
		border-radius:50%;
		z-index: 3;
	}
	#out{
		width: 300px;
		height: 300px;
		border: 1px solid #000;
		background-color: #ff6699;
		float:right;
	}
	#in{
		width: 110px;
		height: 110px;
		border: 1px solid #000;
		background-color: #ffff99;
		position: relative;
		top:100px;
		left: 100px;
	}
	#text{
		width: 280px;
		padding: 10px;
		float: right;
		clear: right;
		text-align: center;
	}
</style>
		<script src="resources/js/jquery-1.7.2.min.js"></script>
        <script src="resources/js/jquery-ui-1.8.21.custom.min.js"></script>
</head>
<body>
<div id="drag"></div>
<div id="out" class="drop">
	<div id="in" class="drop"></div>
</div>
<div id="text"></div>
<script type="text/javascript">
	$(function(){
		var dropOption ={
				drop:Callback,
				greedy:true
		};
	function Callback(e){
		var message=$("<p/>",{
			id:"message",
			text:"현재 드롭요소는"+e.target.id+"에 포함되어있습니다."
		});
		$("#text").append(message);
	}
	$("#drag").draggable();
	$(".drop").droppable(dropOption);
	});
</script>
</body>
</html>